<template>
  <el-row :gutter="20" style="min-width: 1500px">
    <el-col :span="24">
      <div class="grid_chart_bg">
        <div>资源</div>
        <div class="grid_chart_bg--char x-flex x-row-between">
          <div class="-chartShape">
            <div ref="chartRef"></div>
          </div>
          <div class="-chartShape">
            <div ref="chartFlowRef"></div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20" style="min-width: 1500px">
    <el-col :span="12" style="margin-top: 10px; padding-right: 5px">
      <div class="grid_line_diagram_bg">
        <div class="x-flex x-row-between">
          <text>存储使用</text>
          <div class="x-flex" style="align-items: flex-start">
            <el-radio-group v-model="radioTime" class="x-m-r-15">
              <el-radio-button label="本月" />
              <el-radio-button label="最近30天" />
              <el-radio-button label="最近15天" />
              <el-radio-button label="最近7天" />
            </el-radio-group>
            <el-date-picker
              v-model="storageDate"
              value-format="YYYY-MM-DD"
              placeholder="请选择日期"
              2="date"
            />
          </div>
        </div>
        <div class="area_boundary">
          <div ref="containerRef"></div>
        </div>
      </div>
    </el-col>
    <el-col :span="12" style="margin-top: 10px; padding-left: 5px">
      <div class="grid_line_diagram_bg">
        <div class="x-flex x-row-between">
          <text>流量使用</text>
          <div class="x-flex" style="align-items: flex-start">
            <el-radio-group v-model="flowTime" class="x-m-r-15">
              <el-radio-button label="本月" />
              <el-radio-button label="最近30天" />
              <el-radio-button label="最近15天" />
              <el-radio-button label="最近7天" />
            </el-radio-group>
            <el-date-picker
              v-model="flowDate"
              value-format="YYYY-MM-DD"
              placeholder="请选择日期"
              type="date"
            />
          </div>
        </div>
        <div class="area_boundary">
          <div ref="flowerRef"></div>
        </div>
      </div>
    </el-col>
  </el-row>
  <div>
    <div id="container" />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, unref, shallowRef, watch } from "vue";
import { lineChart, pieInit, lineCharts } from "./chartParameters";
import {
  statistics,
  resourcesFoldLine,
  flowFoldingLine,
} from "@/api/advertising";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { Area } from "@antv/g2plot";
// 饼图数据
const chartRef = ref(null);
const chartFlowRef = ref(null);
const suffixIcon = "el-icon-arrow-right";
const statisticsData = async () => {
  let { data } = await statistics();
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  let chartRrogramRef = data.data.resourcesInfo;
  data.data.flowInfo.map((item: any) => {
    item.type = item.type + "流量";
    return item;
  });
  let flowData = data.data.flowInfo;
  chartInit(chartRrogramRef, flowData);
};
const chartInit = (chartRrogramRef: any, flowData: any) => {
  pieInit(chartRef, chartRrogramRef, [
    "#39a0ff",
    "#34c9c9",
    "#4ec973",
    "#fcd434",
    "#f0f2f5",
  ]).render();
  pieInit(chartFlowRef, flowData, ["#9bdeff", "#0daeff"], "使用流量").render();
};

// 折线图 - 存储使用
const radioTime = shallowRef("本月"); //选择日期
const storageDate = shallowRef(); //日历
const containerRef = ref<any>(null);
const storageUsage = ref(); //存储
watch(storageDate, async (newVal: string) => {
  let Parameters;
  if (newVal) {
    Parameters = {
      startData: newVal,
      endTime: newVal,
    };
  } else {
    Parameters = {
      startData: dayjs().startOf("month").format("YYYY-MM-DD"),
      endTime: dayjs().format("YYYY-MM-DD"),
    };
  }
  let { data } = await resourcesFoldLine(Parameters);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value + "MB" };
  });

  unref(storageUsage).upChart(updatedJsonData);
});
watch(radioTime, (newVal: string) => {
  switch (newVal) {
    case "最近30天":
      storageThirtyDays();
      break;
    case "最近15天":
      storageFifteenDays();
      break;
    case "最近7天":
      storageSevenDays();
      break;
    case "本月":
      storageMonth();
  }
});
const storageFoldLines = async () => {
  let Parameters = {
    startData: dayjs().startOf("month").format("YYYY-MM-DD"),
    endTime: dayjs().format("YYYY-MM-DD"),
  };
  let { data } = await resourcesFoldLine(Parameters);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  //存储
  storageUsage.value = new lineChart("storage");
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });
  unref(storageUsage).init(containerRef, updatedJsonData);
};
const storageMonth = async () => {
  let Parameters = {
    startData: dayjs().startOf("month").format("YYYY-MM-DD"),
    endTime: dayjs().format("YYYY-MM-DD"),
  };
  let { data } = await resourcesFoldLine(Parameters);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });
  unref(storageUsage).upChart(updatedJsonData);
};
const storageThirtyDays = async () => {
  let Parameters = {
    startData: dayjs().subtract(30, "day").format("YYYY-MM-DD"),
    endTime: dayjs().format("YYYY-MM-DD"),
  };
  let { data } = await resourcesFoldLine(Parameters);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });

  unref(storageUsage).upChart(updatedJsonData);
};
const storageFifteenDays = async () => {
  let Parameters = {
    startData: dayjs().subtract(15, "day").format("YYYY-MM-DD"),
    endTime: dayjs().format("YYYY-MM-DD"),
  };
  let { data } = await resourcesFoldLine(Parameters);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });
  unref(storageUsage).upChart(updatedJsonData);
};
const storageSevenDays = async () => {
  let Parameters = {
    startData: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
    endTime: dayjs().format("YYYY-MM-DD"),
  };
  let { data } = await resourcesFoldLine(Parameters);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });
  unref(storageUsage).upChart(updatedJsonData);
};
// 流量
const flowerRef = ref<any>(null);
const flowTime = shallowRef("本月");
const flowDate = shallowRef();
const flowUsage = ref();

watch(flowDate, async (newVal: string) => {
  let start, end;
  if (newVal) {
    start = newVal;
    end = newVal;
  } else {
    start = dayjs().startOf("month").format("YYYY-MM-DD");
    end = dayjs().format("YYYY-MM-DD");
  }

  const { data } = await flowFoldingLine(start, end);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });
  unref(flowUsage).upChart(updatedJsonData);
});

watch(flowTime, (newVal: string) => {
  switch (newVal) {
    case "最近30天":
      flowThirtyDays();
      break;
    case "最近15天":
      flowFifteenDays();
      break;
    case "最近7天":
      flowSevenDays();
      break;
    case "本月":
      flowMonth();
  }
});
const getFlowFolding = async () => {
  const start = dayjs().startOf("month").format("YYYY-MM-DD"),
    end = dayjs().format("YYYY-MM-DD");
  const { data } = await flowFoldingLine(start, end);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  //流量
  flowUsage.value = new lineCharts("flow");
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });
  unref(flowUsage).init(flowerRef, updatedJsonData);
};
const flowMonth = async () => {
  const start = dayjs().startOf("month").format("YYYY-MM-DD"),
    end = dayjs().format("YYYY-MM-DD");
  const { data } = await flowFoldingLine(start, end);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });
  unref(flowUsage).upChart(updatedJsonData);
};
const flowThirtyDays = async () => {
  const start = dayjs().subtract(30, "day").format("YYYY-MM-DD"),
    end = dayjs().format("YYYY-MM-DD");
  const { data } = await flowFoldingLine(start, end);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });
  unref(flowUsage).upChart(updatedJsonData);
};
const flowFifteenDays = async () => {
  const start = dayjs().subtract(15, "day").format("YYYY-MM-DD"),
    end = dayjs().format("YYYY-MM-DD");
  const { data } = await flowFoldingLine(start, end);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });
  unref(flowUsage).upChart(updatedJsonData);
};
const flowSevenDays = async () => {
  const start = dayjs().subtract(7, "day").format("YYYY-MM-DD"),
    end = dayjs().format("YYYY-MM-DD");
  const { data } = await flowFoldingLine(start, end);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  const updatedJsonData = data.data.map((item: any) => {
    const { value, ...rest } = item;
    return { ...rest, 总使用量: value };
  });
  unref(flowUsage).upChart(updatedJsonData);
};

onMounted(() => {
  statisticsData();
  storageFoldLines();
  getFlowFolding();
});
</script>
<style lang="scss" scoped>
::v-deep .g2-tooltip-crosshair {
  stroke: #f00;
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
::v-deep .el-date-editor .clear-icon {
  color: var(--el-text-color-secondary);
  margin-right: 15px;
}
::v-deep .el-input__prefix {
  display: inline-flex;
  white-space: nowrap;
  flex-shrink: 0;
  flex-wrap: nowrap;
  height: 100%;
  text-align: center;
  color: var(--el-input-icon-color, var(--el-text-color-placeholder));
  transition: all var(--el-transition-duration);
  pointer-events: none;
  position: fixed;
  right: 0;
}
.grid_chart_bg {
  width: 100%;
  height: 370px;
  font-size: 16px;
  font-weight: 500;
  background-color: white;
  border-radius: 8px;
  padding: 20px;

  &--char {
    width: 100%;
    height: 90%;

    .-chartShape {
      width: 50%;

      &:last-child {
        border-left: 1px solid #ebeff3;
      }
    }
  }
}
::v-deep .el-input input::selection {
  background-color: #79bbff;
}
.grid_line_diagram_bg {
  width: 100%;
  height: 466px;
  border-radius: 8px;
  background-color: white;
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
  .area_boundary {
    margin-top: 10px;
  }
}
::v-deep .x-row-between {
  justify-content: space-between;
}
</style>
